<template>
  <div class="first-scfh">
    <div class="title-box">
      <div class="title">
        <img src="../../../../assets/img/fadianchang.png" alt="" />
        电厂主要设备运行状态
      </div>
      <div class="one_title-box">
        <div style="color: #fff;text-align: left;padding-left: 6vw;">{{cityName}}</div>
        <div class="one_title-box2" v-for="(list,value) in data" :key="value">{{list.name}}：{{list.value}}台</div>
        <!-- <div class="one_title-box3">备用：{{}}台</div>
        <div class="one_title-box4">检修：{{}}台</div> -->
      </div>
      <div class="two_title-box">
        <div class="two_title-box1" id="powerEcharts" ref="powerEcharts"></div>
      </div>
      <div class="three_title-box">
        <div
          class="three_title-box1"
          id="powerEcharts1"
          ref="powerEcharts1"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getScfhData, getScfhChartData } from "@/api/screen";
import "echarts-liquidfill";
import * as echarts from "echarts";
import eventBus from '@/EventBus';

export default {
  name: "first-scfh",
  data() {
    return {
       data: [
         {value:10,name:"主机"},
              { value: 8, name: "运行" },
              { value: 5, name: "备用" },
              { value: 3, name: "检修" },
            ],
           
      powerEcharts: null,
      powerEcharts1: null,
      cityName: ''
    };
  },
  created() {
    eventBus.$on('send', (data1, data2, data3, data4, data5, data6, data7, data8, data9) => {
      this.getechartsTwo(this.data, data4)
      this.getEcharts(this.data, data5)
      this.cityName = data9
    })
  },
  mounted() {
    //
    this.getEcharts( this.data);
    this.getechartsTwo(this.data);
    // 字体自适应改变
    window.addEventListener("resize", () => {
      this.getEcharts(this.data);
      this.getechartsTwo(this.data);
    });
  },
  methods: {
    getEcharts(data, data5) {
      // 字体自适应
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res * fontSize;
      }
      
      this.powerEcharts = echarts.init(this.$refs.powerEcharts);
      // let powerEcharts = this.$echarts.init(
      //   document.getElementById("powerEcharts")
      // );
      // 屏幕自适应
      const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        window.addEventListener("resize", function () {
          self.chart = self.$echarts.init(self.$refs.powerEcharts);
          self.chart.resize();
        });
      }, 10);

      // window.addEventListener("resize", function () {
      //    powerEcharts.resize();

      // });
      var option = {
        color: ["#ab943b", "#51aa8a", "#315fb4"],
        legend: {
          selectedMode: false,
          orient: "vertical",
          top: "15%",
          right: "10%",
          // itemWidth: 30,
          itemWidth: fontSize(3),
          itemHeight: fontSize(3),
          textStyle: {
            //图例文字的样式
            color: "#ffffff",
            // fontSize: "73",
            fontSize: fontSize(7.3),
          },
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "85%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              normal: {
                show: false,
                position: "center",
                formatter: "{label|{b}\n({c})}",
                // formatter: '{value|{c}}\n{label|{b}}',
                rich: {
                  value: {
                    padding: 7,
                    align: "center",
                    verticalAlign: "middle",
                    //  fontSize: 100,

                    fontSize: fontSize(7.8),
                  },
                  label: {
                    align: "center",
                    verticalAlign: "middle",
                    //  fontSize: 110,
                    fontSize: fontSize(6.7),
                  },
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                //  fontSize: "91",
                fontSize: fontSize(6.7),
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
             data: data5 || [
              { value: 8, name: "运行" },
              { value: 5, name: "备用" },
              { value: 3, name: "检修" },
            ],
          },
        ],
      };
      this.powerEcharts.setOption(option, true);
      // getDefaultSelected(powerEcharts);
      // function getDefaultSelected(powerEcharts) {
      //   let index = 0;
      //   powerEcharts.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: 0,
      //     dataIndex: 0,
      //   });
      //   powerEcharts.on("mouseover", (e) => {
      //     if (e.dataIndex !== index) {
      //       powerEcharts.dispatchAction({
      //         type: "downplay",
      //         seriesIndex: 0,
      //         dataIndex: index,
      //       });
      //     }
      //   });
      // }
    },
    getechartsTwo(result, data4) {
      this.powerEcharts1 = echarts.init(this.$refs.powerEcharts1);
      // let powerEcharts1 = this.$echarts.init(
      //   document.getElementById("powerEcharts1")
      // );

      const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存 
      setTimeout(() => {
        window.addEventListener("resize", function () {
          self.chart = self.$echarts.init(self.$refs.powerEcharts1);
          self.chart.resize();
        });
      }, 10);
      // window.addEventListener("resize", function () {
      //   powerEcharts1.resize();
      // });
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res * fontSize;
      }
      var option = {
        tooltip: {
          padding: fontSize(3),
          textStyle: {
            fontSize: fontSize(3),
            // fontSize: 50,
          },
          axisPointer: {
            type: "shadow",

            label: {
              show: true,
            },
          },
        },
        legend: {
          data: ["锅炉", "汽轮机组"],
          top: "2%",
          right: "10%",

          textStyle: {
            color: "rgba(250,250,250,0.6)",
            // fontSize: "50%",
            fontSize: fontSize(5),
          },
        },
        grid: {
          left: "15%",
          button: "1%",
          top: "15%",
          right: "9%",
        },
        yAxis: {
          data: ["检修", "备用", "运行", "主机"],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#26D9FF",
              width: 1,
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(250,250,250,0.6)", //X轴文字颜色
              fontSize: fontSize(5.5),
              // fontSize: 64,
            },
          },
        },
        xAxis: [
          {
            type: "value",
            /*name: "同比",*/
            nameTextStyle: {
              color: "#ebf8ac",
              fontSize: fontSize(2),
              // fontSize: 20,
            },
            // position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              //   formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: fontSize(6),
                // fontSize: 20,
              },
            },
          },
        ],
        series: [
          {
            name: "锅炉",
            type: "bar",
            barWidth: "30%",
            label: {
              show: true,
              position: "right",
              distance: 10,
              color: "#fff",
              fontSize: fontSize(5),
              // fontSize: 60,
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#142737", //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: "#3e71cd", //  100%  处的颜色
                    },
                  ],
                  // global: false, //  缺省为  false
                },
                borderType: 3,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#142737", //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: "#ffffff", //  100%  处的颜色
                    },
                  ],
                  // global: false, //  缺省为  false
                },
              },
            },
            data: data4 ? data4[0] : [4, 3, 1, 8],
          },
          {
            name: "汽轮机组",
            type: "bar",
            barWidth: "30%",
            label: {
              show: true,
              position: "right",
              distance: 10,
              color: "#fff",
              fontSize: fontSize(5),
              // fontSize: 60,
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#162a3b", //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: "#55bde7", //  100%  处的颜色
                    },
                  ],
                  // global: false, //  缺省为  false
                },
                borderWidth: 1,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#85ffff", //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: "#ffffff", //  100%  处的颜色
                    },
                  ],
                  global: false, //  缺省为  false
                },
              },
            },
            data: data4 ? data4[1] : [3, 2, 3, 5],
          },
        ],
      };
      this.powerEcharts1.setOption(option, true);
    },
  },
};
</script>

<style  lang="scss" scoped >
.first-scfh {
  width: 2380px;
  height: 3240px;
  //   background-image: url(../../../../assets/img/newBg02.png);
  background-size: 100% 100%;
  .title-box {
    width: 2380px;
    height: 3240px;
    //  background-color: rgb(193, 18, 18);
    .title {
      margin-top: 110px;
      width: 2380px;
      margin-left: 0;
      height: 217px;
      padding-left: 65px;
      font-size: 145px;

      background-color: #1a2a44;

      color: #e3f6fa;

      img {
        width: 145px;
      }
    }
    .one_title-box {
      float: left;
      padding-top: 150px;
      text-align: center;
      width: 100%;
      height: 771px;
      .one_title-box1 {
        font-size: 152px;
        float: left;
        width: 50%;
        height: 221px;
        line-height: 221px;

        color: #e3f6fa;
      }
      .one_title-box2 {
        float: left;
        width: 50%;
        font-size: 115px;
        color: #8bff4a;
        height: 221px;
        line-height: 221px;
      }
      .one_title-box3 {
        float: left;
        width: 50%;
        font-size: 136px;
        color: #5e9bf0;
        height: 221px;

        line-height: 221px;
      }
      .one_title-box4 {
        float: left;
        width: 50%;
        font-size: 124px;
        color: #ffff69;
        height: 221px;
        line-height: 221px;
      }
    }
    .two_title-box {
      float: left;
      width: 2374px;
      height: 1037px;
      .two_title-box1 {
        float: left;
        width: 2300px;
        height: 1037px;
        //  background-color: rgb(57, 42, 42);
      }
    }
    .three_title-box {
      float: left;
      width: 2374px;
      height: 1105px;

      .three_title-box1 {
        float: left;
        width: 2374px;
        height: 100%;
      }
    }
  }
  #powerEcharts {
    width: 100%;
    height: 98%;
    // font-size: 100px;
    //  background-color: #fff;
  }
  #powerEcharts1 {
    width: 100%;
    //  height: 98%;
    height: 98%;
  }
}
</style>